<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>07_Promise-Promise的then返回值</title>
  <!-- 
  在 JavaScript 中， Promise  的  then  方法不仅用于处理异步操作的结果，还具有返回值的特性。
  1.  then  的基本返回值
  -  then  方法总是返回一个新的  Promise  对象。
  - 这个返回的  Promise  对象的状态取决于  then  中的回调函数的执行结果。

  2. 返回值的类型
  - 如果  onFulfilled  返回一个值：新的  Promise  将被解决（fulfilled），并且解决的值是  onFulfilled  返回的值。
  const promise1 = Promise.resolve(42);
    
    promise1.then((value) => {
        console.log(value); // 输出: 42
        return "Hello, World!"; // 返回一个值
    }).then((newValue) => {
        console.log(newValue); // 输出: Hello, World!
    });
  - 如果  onFulfilled  返回一个  Promise ：新的  Promise  将会等待这个  Promise  的解决结果，并将其作为解决值。
  const promise2 = new Promise((resolve) => {
        setTimeout(() => resolve("Resolved after 1 second"), 1000);
    });
    
    promise2.then((value) => {
        console.log(value); // 输出: Resolved after 1 second
        return new Promise((resolve) => {
            setTimeout(() => resolve("Another promise resolved"), 1000);
        });
    }).then((newValue) => {
        console.log(newValue); // 输出: Another promise resolved
    });
  - 如果  onFulfilled  抛出错误：新的  Promise  将被拒绝（rejected），并且拒绝的原因是抛出的错误。
  const promise3 = Promise.resolve("Success");
    
    promise3.then((value) => {
        console.log(value); // 输出: Success
        throw new Error("Something went wrong!"); // 抛出错误
    }).catch((error) => {
        console.error(error.message); // 输出: Something went wrong!
    });
  3. 链式调用
  由于  then  返回一个新的  Promise ，可以实现链式调用，并且每个  then  可以有自己的  onFulfilled  和  onRejected  回调。
  const promise4 = Promise.resolve("Initial value");

  promise4
      .then((value) => {
          console.log(value); // 输出: Initial value
          return "Next value"; // 返回一个值
      })
      .then((nextValue) => {
          console.log(nextValue); // 输出: Next value
          throw new Error("Error in next then"); // 抛出错误
      })
      .catch((error) => {
          console.error(error.message); // 输出: Error in next then
      });
  4. 总结
  Promise  的  then  方法的返回值特性使得异步编程更加灵活和强大。通过返回值，可以在多个  then  之间传递数据、处理错误，并实现复杂的异步操作。理解  then  返回值的行为对于有效地使用  Promise  进行异步编程至关重要。
  -->
</head>
<body>

  <script>

    // 1.then方法是返回一个新的Promise, 这个新Promise的决议是等到then方法传入的回调函数有返回值时, 进行决议
    // Promise本身就是支持链式调用
    // then方法是返回一个新的Promise, 链式中的then是在等待这个新的Promise有决议之后执行的
    const p1 = new Promise((resolve, reject) => {
      resolve(1111)
    })

    const p2 = p1.then(res => {
      console.log("Promise的值1: ", res)
      return 2
    }).then(res => {
      console.log("Promise的值2: ", res)
      return 3
    }).then(res => {
      console.log("Promise的值3: ", res)
      return 4
    })

    // const p3 = new Promise((resolve, reject) => {
    //   reject(2222)
    // })

    console.log(p1)
    console.log(p2)
    // console.log(p3)

    // 2. then方法传入的回调函数的返回值, 会作为新Promise的决议值
    // const newPromise = new Promise((resolve, reject) => {
    //   resolve(1111)
    // }).then(res => {
    //   console.log("newPromise的值1: ", res)
    //   return 2
    // }).then(res => {
    //   console.log("newPromise的值2: ", res)
    //   return 3
    // }).then(res => {
    //   console.log("newPromise的值3: ", res)
    // })

    p2.then(res => {
      console.log("第一个Promise的then方法:", res)
      // 1.普通值
      // return "bbbbbbb"
      // 2.新的Promise
      // return newPromise
      // 3.thenable的对象
      return {
        then: function(resolve) {
          resolve("thenable")
        }
      }
    }).then(res => {
      console.log("第二个Promise的then方法:", res) // undefined
    })

    // 3. 如果回调函数没有返回值, 那么新Promise的决议值是undefined
    const newPromise2 = new Promise((resolve, reject) => {
      resolve(1111)
    }).then(res => {
      console.log("newPromise2的值1: ", res)
    })


  </script>
  
</body>
</html>